<template>
  <div class="records-page">
    <div class="records-container">
      <div class="page-header">
        <h2>我的抽奖记录</h2>
        <div class="header-stats">
          <div class="stat-item">
            <span class="stat-label">总抽奖次数：</span>
            <span class="stat-value">{{ totalRecords }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">中奖次数：</span>
            <span class="stat-value winning">{{ winningRecords }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">中奖率：</span>
            <span class="stat-value">{{ winRate }}%</span>
          </div>
        </div>
      </div>

      <div class="records-content">
        <div v-if="loading" class="loading-container">
          <el-loading-spinner />
          <p>加载中...</p>
        </div>

        <div v-else-if="records.length === 0" class="empty-state">
          <div class="empty-icon">🎰</div>
          <h3>暂无抽奖记录</h3>
          <p>快去参与抽奖吧！</p>
          <el-button type="primary" @click="$router.push('/lottery')">
            立即抽奖
          </el-button>
        </div>

        <div v-else class="records-list">
          <div 
            v-for="record in records" 
            :key="record.id"
            class="record-card"
            :class="{ 'winning': record.isWinner }"
          >
            <div class="record-icon">
              {{ record.isWinner ? '🏆' : '🎯' }}
            </div>
            <div class="record-info">
              <div class="record-prize">
                <span class="prize-name">{{ record.prizeName }}</span>
                <span 
                  class="record-status" 
                  :class="{ 'winner': record.isWinner, 'loser': !record.isWinner }"
                >
                  {{ record.isWinner ? '中奖' : '未中奖' }}
                </span>
              </div>
              <div v-if="record.prize && record.prize.description" class="record-description">
                {{ record.prize.description }}
              </div>
              <div class="record-time">
                {{ formatTime(record.createdAt) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const records = ref([])
const loading = ref(true)

const totalRecords = computed(() => records.value.length)
const winningRecords = computed(() => records.value.filter(r => r.isWinner).length)
const winRate = computed(() => {
  if (totalRecords.value === 0) return 0
  return ((winningRecords.value / totalRecords.value) * 100).toFixed(1)
})

const fetchRecords = async () => {
  try {
    loading.value = true
    const response = await axios.get('/api/lottery/records')
    records.value = response.data
  } catch (error) {
    ElMessage.error('获取抽奖记录失败')
  } finally {
    loading.value = false
  }
}

const formatTime = (timeString) => {
  const date = new Date(timeString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

onMounted(() => {
  fetchRecords()
})
</script>

<style scoped>
.records-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.records-container {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
}

.page-header h2 {
  margin: 0 0 20px 0;
  font-size: 2rem;
}

.header-stats {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-label {
  opacity: 0.9;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: bold;
}

.stat-value.winning {
  color: #ffd04b;
}

.records-content {
  padding: 30px;
}

.loading-container {
  text-align: center;
  padding: 60px 0;
  color: #7f8c8d;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.empty-state h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.empty-state p {
  color: #7f8c8d;
  margin-bottom: 30px;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.record-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
}

.record-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.record-card.winning {
  border-color: #67c23a;
  background-color: #f0f9ff;
}

.record-icon {
  font-size: 2rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f5f5f5;
}

.record-card.winning .record-icon {
  background-color: #67c23a;
  color: white;
}

.record-info {
  flex: 1;
}

.record-prize {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 8px;
}

.prize-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2c3e50;
}

.record-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

.record-status.winner {
  background-color: #67c23a;
  color: white;
}

.record-status.loser {
  background-color: #f56c6c;
  color: white;
}

.record-description {
  color: #7f8c8d;
  margin-bottom: 8px;
  font-size: 14px;
}

.record-time {
  color: #95a5a6;
  font-size: 12px;
}

@media (max-width: 768px) {
  .header-stats {
    flex-direction: column;
    gap: 15px;
  }
  
  .record-card {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .record-prize {
    flex-direction: column;
    gap: 10px;
  }
}
</style>